<template>
  <van-field :name="name" :label="label">
    <template #input>
      <van-checkbox-group v-model="modelValue" :shape="shape" v-bind="computedAttrs">
        <van-checkbox
          v-for="$item in props.itemList"
          :name="$item.value"
          v-bind:key="$item.value"
          v-bind="checkboxAttrs"
        >
          {{ $item.label }}
          <template v-for="(_, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
          </template>
        </van-checkbox>
      </van-checkbox-group>
    </template>
  </van-field>
</template>
  <script setup name="I-Checkbox">
const $attrs = useAttrs()
const modelValue = defineModel({ type: Array, default: '' })
const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: 'checkbox'
  },
  itemList: {
    type: Array,
    default: []
  },
  direction: {
    default: 'horizontal'
  },
  shape: {
    default: 'square'
  },
  //checkbox的属性
  checkboxAttrs: {
    type: Object,
    default: {}
  }
})

// 计算属性，合并 props 和 $attrs
const computedAttrs = computed(() => {
  return {
    ...$attrs,
    direction: props.direction //横着布局比较多
  }
})
</script>